<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>滚滚筹-详情</title>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/common.min.css">
    <link rel="stylesheet" href="css/base.min.css">
</head>
<body class="isHide">
<div class="wrap height top">
    <div class="header">
        <div class="left">
            <a href="javascript:;">
                <i class="sprite icon-back"></i>
            </a>
        </div>
        <div class="mid">
            <label class="text"><span>标书详情</span></label>
        </div>
    </div>
    <div class="wrap height overflow background g-f5" id="container">
        <div class="overflow-box">
            <div class="banner">
                <div class="swiper-container" id="banner">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide ">
                            <a href="#">
                                <img class="swiper-lazy" data-src="img/detail-img1.jpg"
                                     src="img/banner-def.jpg">
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <img class="swiper-lazy" data-src="img/detail-img2.jpg"
                                     src="img/banner-def.jpg">
                            </a>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <div class="detail-cont">
                <div class="detail-intro">
                    <h2 class="de-title">
                        <span class="tag text going">众筹中</span>
                        <label class="tm-clamp">第七期凯迪拉克发行2017款2.0TSE 凯迪拉克发行2017款2.0SE-2017</label>
                    </h2>
                    <label class="de-money clearfix">
                        <span class="fl">总筹款：<em class="tc-ff3d3d">¥ 218,000</em></span>
                        <span class="fl">已筹款：<em class="tc-ff3d3d">¥ 118,000</em></span>
                    </label>
                    <div class="de-progress">
                        <div class="fb-progress section gradient fb-radius-3">
                            <em class="meter finished">80.5%</em>
                            <em class="meter unfinished">10.4%</em>
                            <span class="runner finished"></span>
                            <span class="runner unfinished"></span>
                        </div>
                    </div>
                    <div class="de-table">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <colgroup>
                                <col width="25%">
                                <col width="25%">
                                <col width="50%">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>65.73%</th>
                                <th>6次</th>
                                <th>
                                    <label class="time-down" data-time="2020/08/20 23:59:59">
                                        <span class="time-day" data-format="天"></span>
                                        <span class="time-hour" data-format="时"></span>
                                        <span class="time-minute" data-format="分"></span>
                                        <span class="time-second" data-format="秒"></span>
                                        <span class="time-loading"><img src="img/jBox/jLoading.gif">倒计时加载中...</span>
                                    </label>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>达成率</td>
                                <td>众筹人次</td>
                                <td>剩余时间</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="de-list mt-10">
                        <p>
                            <span class="tc-333">最长持有期限：</span>
                            <i>60天</i>
                        </p>
                        <p>
                            <span class="tc-333">众筹最大金额：</span>
                            <i>￥54,870</i>
                        </p>
                        <p>
                            <span class="tc-333">众筹最小金额：</span>
                            <i>￥100</i>
                        </p>
                        <p>
                            <span class="color-gray-666">众筹剩余金额：</span>
                            <i>￥62,675</i>
                        </p>
                    </div>
                </div>
                <div class="fb-module mt-10 pb-10">
                    <div class="m-title no-bd">
                        <label>众筹金额</label>
                        <em class="fs-11 tc-ff3d3d">(每个用户每个众筹项目只能认筹1次)</em>
                    </div>
                    <div class="m-cont">
                        <div class="de-crowd">
                            <label class="user-form pad-small before-text">
                                <em>￥</em>
                                <input type="number" placeholder="请输入众筹金额" value="">
                            </label>
                            <a class="fb-btn background blue-dark no-bd" href="crowd-pay.html">立即认筹</a>
                        </div>
                        <div class="de-account">
                            <label>账户余额：<i class="tc-ff3d3d">￥0.00</i></label>
                            <label>我的积分：<i class="tc-ff3d3d">500</i></label>
                        </div>
                    </div>
                </div>
                <div class="fb-module gray pt-30 pb-35 pl-20 pr-20">
                    <div class="fl-title">
                        <span class="background">向上滑动显示产品详情</span>
                    </div>
                </div>
                <!--<div class="list-loading background">-->
                    <!--<i><img src="img/loading.gif"></i>-->
                    <!--<span>载入详情中...</span>-->
                <!--</div>-->
                <a class="d-none" href="javascript:;" id="details">显示详情</a>
            </div>
        </div>
    </div>
</div>

<!--置顶按钮-->
<a class="p-fix go-top" href="javascript:;" id="goTop"><img src="img/icon-top.png"></a>

<!--显示产品大图-->
<div class="fb-pop-disk block black product-big animated-left">
    <div class="fb-pop-box top">
        <div class="fb-disk-hd no-bd bigger-pad">
            <span class="fb-disk-title" id="productLength"><i>1</i> of <i>12</i></span>
            <a class="fb-disk-close">&times</a>
        </div>
        <div class="fb-disk-bd">
            <div class="product-big-list">
                <div class="swiper-container" id="productBig">
                    <div class="swiper-wrapper"></div>
                    <div class='swiper-loading'></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--详情-->
<div class="fb-pop-disk details-pop-disk">
    <div class="fb-pop-box details-pop-box bottom top animated-bottom">
        <div class="fb-disk-hd bigger-pad big">
            <span class="fb-disk-title">产品详情</span>
            <a class="fb-disk-close">&times</a>
        </div>
        <div class="fb-disk-bd">
            <div class="fb-module fb-wrap-height">
                <div class="fb-tab-bar fb-wrap-height pad-top">
                    <div class="fb-tab-menu fb-box-list">
                        <ul class="row-5 clearfix">
                            <li><a href="javascript:;" data-id="CLXX" class="current">车辆信息</a></li>
                            <li><a href="javascript:;" data-id="XGPZ" class="">相关凭证</a></li>
                            <li><a href="javascript:;" data-id="TZJL" class="">投资记录</a></li>
                            <li><a href="javascript:;" data-id="TPJL" class="">投票记录</a></li>
                            <li><a href="javascript:;" data-id="XMPJ" class="">项目评价</a></li>
                        </ul>
                        <span class="tab-line"></span>
                    </div>
                    <div class="swiper-container fb-wrap-height" id="productSwiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" id="CLXX">
                                <div class="fb-wrap-height overflow">
                                    <div class="overflow-box">
                                        <div class="swiper-loading"></div>
                                        <div class="product-information">
                                            <p>本次众筹莱迪拉克ATS-L2017款28T技术项目，全新
                                                车系，厂商指导价格：186800元，本次众筹价格：
                                                156800元。众筹期限为7天众筹成功以后出售日期为
                                                60日，如60日内未成功出书，则由汇众筹按众筹价格
                                                年化收益无条件溢价回购。在其间内众筹失败，则退
                                                回资金至汇众筹账户，期间无任何收益。</p>
                                            <img src="img/detail-img1.jpg">
                                            <img src="img/detail-img2.jpg">
                                            <p>本次众筹莱迪拉克ATS-L2017款28T技术项目，全新
                                                车系，厂商指导价格：186800元，本次众筹价格：
                                                156800元。众筹期限为7天众筹成功以后出售日期为
                                                60日，如60日内未成功出书，则由汇众筹按众筹价格
                                                年化收益无条件溢价回购。在其间内众筹失败，则退
                                                回资金至汇众筹账户，期间无任何收益。</p>
                                            <img src="img/detail-img1.jpg">
                                            <img src="img/detail-img2.jpg">
                                            <p>本次众筹莱迪拉克ATS-L2017款28T技术项目，全新
                                                车系，厂商指导价格：186800元，本次众筹价格：
                                                156800元。众筹期限为7天众筹成功以后出售日期为
                                                60日，如60日内未成功出书，则由汇众筹按众筹价格
                                                年化收益无条件溢价回购。在其间内众筹失败，则退
                                                回资金至汇众筹账户，期间无任何收益。</p>
                                            <img src="img/detail-img1.jpg">
                                            <img src="img/detail-img2.jpg">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide" id="XGPZ">
                                <div class="swiper-loading"></div>
                                <div class="fb-wrap-height overflow">
                                    <div class="overflow-box">
                                        <div class="product-information">
                                            <img src="img/detail-data1.jpg">
                                            <img src="img/detail-data2.jpg">
                                            <img src="img/detail-data3.jpg">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide" id="TZJL">
                                <div class="swiper-loading"></div>
                                <div class="fb-wrap-height overflow">
                                    <div class="overflow-box">
                                        <div class="product-information">
                                            <table class="product-table" cellpadding="0" cellspacing="0">
                                                <colgroup>
                                                    <col width="20%">
                                                    <col width="20%">
                                                    <col width="60%">
                                                </colgroup>
                                                <thead>
                                                <tr>
                                                    <th>参与者</th>
                                                    <th>投资金额</th>
                                                    <th>投资时间</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                    <td>*钟祥</td>
                                                    <td>￥20,000</td>
                                                    <td>2017-06-14 15:31:20</td>
                                                </tr>
                                                <tr>
                                                    <td>*钟祥</td>
                                                    <td>￥20,000</td>
                                                    <td>2017-06-14 15:31:20</td>
                                                </tr>
                                                <tr>
                                                    <td>*钟祥</td>
                                                    <td>￥20,000</td>
                                                    <td>2017-06-14 15:31:20</td>
                                                </tr>
                                                <tr>
                                                    <td>*钟祥</td>
                                                    <td>￥20,000</td>
                                                    <td>2017-06-14 15:31:20</td>
                                                </tr>
                                                <tr>
                                                    <td>*钟祥</td>
                                                    <td>￥20,000</td>
                                                    <td>2017-06-14 15:31:20</td>
                                                </tr>
                                                <tr>
                                                    <td>*钟祥</td>
                                                    <td>￥20,000</td>
                                                    <td>2017-06-14 15:31:20</td>
                                                </tr>
                                                <tr>
                                                    <td>*钟祥</td>
                                                    <td>￥20,000</td>
                                                    <td>2017-06-14 15:31:20</td>
                                                </tr>
                                                <tr>
                                                    <td>*钟祥</td>
                                                    <td>￥20,000</td>
                                                    <td>2017-06-14 15:31:20</td>
                                                </tr>
                                                <tr>
                                                    <td>*钟祥</td>
                                                    <td>￥20,000</td>
                                                    <td>2017-06-14 15:31:20</td>
                                                </tr>
                                                <tr>
                                                    <td>136****2957</td>
                                                    <td>￥200,000</td>
                                                    <td>2017-06-14 15:31:20</td>
                                                </tr>
                                                <tr>
                                                    <td>*钟祥</td>
                                                    <td>￥20,000</td>
                                                    <td>2017-06-14 15:31:20</td>
                                                </tr>
                                                <tr>
                                                    <td>*钟祥</td>
                                                    <td>￥20,000</td>
                                                    <td>2017-06-14 15:31:20</td>
                                                </tr>
                                                <tr>
                                                    <td>*钟祥</td>
                                                    <td>￥20,000</td>
                                                    <td>2017-06-14 15:31:20</td>
                                                </tr>
                                                <tr>
                                                    <td>*钟祥</td>
                                                    <td>￥20,000</td>
                                                    <td>2017-06-14 15:31:20</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide" id="TPJL">
                                <div class="swiper-loading"></div>
                                <div class="fb-wrap-height overflow">
                                    <div class="overflow-box">
                                        <div class="product-information">
                                            <table class="product-table" cellpadding="0" cellspacing="0">
                                                <colgroup>
                                                    <col width="20%">
                                                    <col width="20%">
                                                    <col width="60px">
                                                    <col width="100px">
                                                </colgroup>
                                                <thead>
                                                <tr>
                                                    <th>投票人</th>
                                                    <th>投资金额</th>
                                                    <th>赞成/反对</th>
                                                    <th>投票时间</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                    <td>*继强</td>
                                                    <td>￥200,000</td>
                                                    <td>赞成</td>
                                                    <td>2017-06-14 15:31:20</td>
                                                </tr>
                                                <tr>
                                                    <td>*钟祥</td>
                                                    <td>￥200,000</td>
                                                    <td>赞成</td>
                                                    <td>2017-06-14 15:31:20</td>
                                                </tr>
                                                <tr>
                                                    <td>*钟祥</td>
                                                    <td>￥20,000</td>
                                                    <td>赞成</td>
                                                    <td>2017-06-14 15:31:20</td>
                                                </tr>
                                                <tr>
                                                    <td>*钟祥</td>
                                                    <td>￥200,000</td>
                                                    <td>赞成</td>
                                                    <td>2017-06-14 15:31:20</td>
                                                </tr>
                                                <tr>
                                                    <td>*钟祥</td>
                                                    <td>￥20,000</td>
                                                    <td>赞成</td>
                                                    <td>2017-06-14 15:31:20</td>
                                                </tr>
                                                <tr>
                                                    <td>*钟祥</td>
                                                    <td>￥200,000</td>
                                                    <td>赞成</td>
                                                    <td>2017-06-14 15:31:20</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide" id="XMPJ">
                                <div class="swiper-loading"></div>
                                <div class="fb-wrap-height overflow">
                                    <div class="overflow-box">
                                        <div class="product-information">
                                            <div class="evaluate-box">
                                                <div class="evaluate-title">
                                                    <span class="t">您的评价：</span>
                                                </div>
                                                <div class="evaluate-grade">
                                                    <span class="t fl">本次投票的满意度：</span>
                                                    <label class="c start-box start-select">
                                                        <i class="sprite icon-start"></i>
                                                        <i class="sprite icon-start"></i>
                                                        <i class="sprite icon-start"></i>
                                                        <i class="sprite icon-start"></i>
                                                        <i class="sprite icon-start"></i>
                                                    </label>
                                                </div>
                                                <div class="evaluate-text">
                                                    <label class="c">
                                                <textarea cols="" rows=""
                                                          placeholder="5分好评，并且满20字的评价有机会获得平台赠送的积分哦!"></textarea>
                                                    </label>
                                                </div>
                                                <div class="evaluate-btn clearfix">
                                                    <a class="fb-btn background blue-dark line-block small no-bd fr fs-14"
                                                       href="javascript:;">提交评价</a>
                                                </div>
                                            </div>
                                            <div class="evaluate-list">
                                                <h2 class="fl-title"><span>评价</span></h2>
                                                <div class="list">
                                                    <ul>
                                                        <li>
                                                            <div class="evaluate-user">
                                                                <label>
                                                                    <img src="img/user-img.jpg">
                                                                    <span>136****2957</span>
                                                                </label>
                                                                <span>2017-06-24 12:12:58</span>
                                                            </div>
                                                            <div class="evaluate-infor">
                                                                <label class="start-box">
                                                                    <i class="sprite icon-start active"></i>
                                                                    <i class="sprite icon-start active"></i>
                                                                    <i class="sprite icon-start active"></i>
                                                                    <i class="sprite icon-start active"></i>
                                                                    <i class="sprite icon-start active"></i>
                                                                </label>
                                                                <label>项目回报很不错，值得投资项目回报很不错，值得投资项目回报很不错，值得投资项目回报很不错，值得投资</label>
                                                            </div>
                                                        </li>
                                                        <li>
                                                            <div class="evaluate-user">
                                                                <label>
                                                                    <img src="img/user-img.jpg">
                                                                    <span>136****2957</span>
                                                                </label>
                                                                <span>2017-06-24 12:12:58</span>
                                                            </div>
                                                            <div class="evaluate-infor">
                                                                <label class="start-box">
                                                                    <i class="sprite icon-start active"></i>
                                                                    <i class="sprite icon-start active"></i>
                                                                    <i class="sprite icon-start active"></i>
                                                                    <i class="sprite icon-start active"></i>
                                                                    <i class="sprite icon-start active"></i>
                                                                </label>
                                                                <label>项目回报很不错，值得投资</label>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<script src="js/box.js"></script>
<script src="js/common.js"></script>
<script src="js/base.js"></script>
<script>
    $(function () {
        //切换菜单
        var $menu = $(".fb-tab-menu");
        var $current = $menu.find("a.current");
        //tab-line
        resizeInit(function (w) {
            var width = w / $menu.find("li").length;
            $(".tab-line").width(width).css("left", $current.offset().left + "px");
        });

        //详情
        popLeftMenu({
            isDiskClose: false,
            clickEle: "#details",
            diskEle: ".details-pop-disk",
            animateEle: ".details-pop-box",
            openCallback: function () {
                var nav = {
                    element: $menu.find("a"),
                    length: $menu.find("li").length,
                    navID: [],
                    current: $current.parent().index()
                };
                $menu.find("a").each(function () {
                    nav.navID.push($(this).data("id"));
                    $(this).click(function () {
                        if ($(this).hasClass("current")) return false;
                        var $line = $(".tab-line");
                        var index = $(this).parents("li").index();
                        $(this).addClass("current").parents("li").siblings().find("a").removeClass("current");
                        product.slideTo(index);
                        $line.css("left", $(this).offset().left + "px");
                    });
                });
                //产品切换
                var _clear_timer_ = 0;
                var product = FB.newSwiper("#productSwiper", 1, {
                    autoplay: 0,
                    pagination: null,
                    loop: false,
                    autoplayDisableOnInteraction: false,
                    lazyLoading: false,
                    onInit: function (s) {
                        var $container = s.container;
                        var $active = $container.find(".swiper-slide-active");
                        var $loading = $active.find(".swiper-loading");
                        $loading.hide();
                    },
                    onSlideChangeEnd: function (s) {
                        clearTimeout(_clear_timer_);
                        nav.element[s.activeIndex].click();
                        var $container = s.container;
                        var $active = $container.find(".swiper-slide-active");
                        var $loading = $active.find(".swiper-loading");
                        if ($loading.css("display") == "block") {
                            _clear_timer_ = setTimeout(function () {
                                $loading.hide();
                                s.update();
                            }, 1000);
                        }
                    }
                });
                setTimeout(function () {
                    $("#goTop").hide();
                }, 200);
            },
            closeCallback: function () {
                var bottom = scroll.dHeight - scroll.wHeight;
                scroll.goToNumber(bottom - 77);
            }
        });

        //页面滚动
        var scroll = pageScroll({
            hasTop: true,
            element: "#container",
            ajaxFun: function () {
                $("#details").click();
            }
        });

        //轮播图
        var banner = FB.newSwiper("#banner", 1, {
            autoplay: 3000,
            pagination: ".swiper-pagination"
        });

        //设置进度
        setProgress(".de-progress");

        //显示产品大图
        $(document).on("click", "#banner", function (e) {
            var that = this;
            e.stopPropagation();
            showBigImg({
                swiperEle: banner,
                clickEle: that,
                allNum: banner.bullets.length,
                animateEle: ".product-big"
            })
        });

        //评价等级
        $(document).on("click", ".start-select .icon-start", function () {
            var $this = $(this);
            $this.addClass("active").prevAll().addClass("active");
            $this.nextAll().removeClass("active");
        });
    })
</script>
</body>
</html>